<template>
  <el-dialog
    title="人员管理"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="dialog"
    width="656px"
  >
    <div class="contentBox">
      <div class="title">新的申请</div>
      <div class="userItem" v-for="(item, index) in applyUserList" :key="'apply' + index">
        <div class="userCard">
          <img class="userHead" src="@/assets/footerBg.png" alt="" srcset="" />
          <div class="userInfo">
            <div class="info">成员</div>
            <div class="name">{{ item.userName }}</div>
          </div>
        </div>
        <!-- <div class="phone">138 8888 8888</div>
        <div class="school">武汉市旭光小学</div> -->
        <div class="option">
          <CustomButton class="customButton" type="danger" plain @click="approve(item.objectId, 'REJECT')">
            拒绝
          </CustomButton>
          <CustomButton class="customButton" type="primary" @click="approve(item.objectId, 'AGREE')">
            同意
          </CustomButton>
        </div>
      </div>
      <div class="title">参与人({{ canLookUserList.length }})</div>

      <div class="userItem" v-for="(item, index) in canLookUserList" :key="'agree' + index">
        <div class="userCard">
          <img class="userHead" src="@/assets/footerBg.png" alt="" srcset="" />
          <div class="userInfo">
            <div class="info">成员</div>
            <div class="name">{{ item.userName }}</div>
          </div>
        </div>
        <!-- <div class="phone">138 8888 8888</div>
        <div class="school">武汉市旭光小学</div> -->
        <div class="option">
          <CustomButton class="customButton" plain @click="removeUser(item.objectId)">
            移除
          </CustomButton>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-popover
        placement="bottom-start"
        width="400"
        trigger="hover"
      >
        <div class="relayArea">
          <el-input
            ref="inputToCopy"
            v-model="textToCopy"
            readonly
            placeholder="这里将显示要复制的文本"
          ></el-input>
          <el-button type="primary" @click="copyToClipboard">复制链接</el-button>
        </div>
        <el-button slot="reference" type="primary">
          邀请新成员
        </el-button>
      </el-popover>
    </div>
  </el-dialog>
</template>

<script>
import CustomButton from '@/components/CustomButton.vue';
import { approveTeachUser, deleteTeachUser } from '@/api/teach';
import { copyToClipboard } from '@/utils'

export default {
  name: 'AddFrom',
  components: { CustomButton },
  data() {
    return {
      dialogVisible: false,
      textToCopy: window.location.href,
    };
  },
  props: {
    teachUserList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    canLookUserList() {
      const agreeList = this.teachUserList.filter(item => {
        return item.status === 'AGREE'
      })
      return agreeList || []
    },
    applyUserList() {
      const applyList = this.teachUserList.filter(item => {
        return item.status === 'APPLY'
      })
      return applyList || []
    }
  },
  methods: {
    // 成功
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 同意
    async approve(id, type) {
      try {
        const params = {
          objectIds: [id],
          type
        }
        await approveTeachUser(params);
        this.$emit('updateUser');
      } catch (error) {
        console.error(error)
      }
    },

    copyToClipboard() {
      copyToClipboard(this.textToCopy);
    },
    // 移除用户
    async removeUser(id) {
      try {
        const params = {
          objectId: id,
        }
        await deleteTeachUser(params);
        this.$emit('updateUser');
      } catch (error) {
        console.error(error)
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  .contentBox {
    height: 500px;
    box-sizing: border-box;
    overflow-y: auto;
    .title {
      font-size: 14px;
      font-weight: 600;
      color: $text-color;
      margin-bottom: 16px;
    }
    .userItem {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .userCard {
        box-sizing: border-box;
        display: flex;
        flex: 1;
        .userHead {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
        .userInfo {
          margin-left: 8px;
          .info {
            color: $text-color;
            font-size: 10px;
            font-weight: 400;
          }
          .name {
            color: $text-title-color;
            margin-top: 4px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
          }
        }
      }

      .phone, .school {
        flex: 1;
        font-size: 12px;
        font-weight: 400;
        color: $text-color;
      }
      .option {
        text-align: right;
        flex: 1;
      }
      .customButton {
        padding: 5px 16px;
        line-height: 18px;
      }
    }
  }
  .dialog-footer {
    text-align: left;
  }
}

.relayArea {
  display: flex;
  padding: 20px;
  box-sizing: border-box;
}
</style>
